<template>
	<view class="body">
		<view class="body-data back" style="display: inline-block;" @click="toMasterDetail(item)" v-for="(item,index) in user" :key="index">
			<!-- <view class="" style="display: inline-block;position:sticky">
				<image src="../../static/logo.png" style="width: 133rpx;height: 133rpx;"></image>
			</view>
			<view class="" style="display: inline-block;position: absolute; position:sticky">
				<view>
					<text style="margin: 0 calc(1vw) 0 calc(1vh);font-size: calc(2.5vh);">{{user.username}}</text>
				</view>
				<view>
					<text style="margin: 0 calc(1vw) 0 calc(1vh);color: #C8C7CC;font-size: calc(1vh);">{{user.species}}</text>
				</view>
				<view>
					<text v-for="(item,index) in 3" :key=index style="font-size: calc(1vh);margin: 0 calc(1vw) 0 calc(1vh);border: #DD524D solid 4rpx;color: #DD524D;">{{user.carryingMethod}}</text>
				</view>
			</view>
			<view style="display: flex; height: calc(9vh); margin-top: calc(0.1vh);">
				<view class="body-title">
					<text style="font-size: calc(2vh);font-weight: 700">{{user.fans}}</text>
					<text style="font-size: calc(1vh);color: #C8C7CC;">粉丝数</text>
				</view>
				<view class="body-title">
					<text style="font-size: calc(2vh);font-weight: 700">￥{{user.videoCooperation}}</text>
					<text style="font-size: calc(1vh);color: #C8C7CC;">短视频合作</text>
				</view>
				<view class="body-title">
					<text style="font-size: calc(2vh);font-weight: 700">￥{{user.live}}</text>
					<text style="font-size: calc(1vh);color: #C8C7CC;">直播合作</text>
				</view>
				<view class="body-title">
					<text style="font-size: calc(2vh);font-weight: 700">{{user.servant}}%</text>
					<text style="font-size: calc(1vh);color: #C8C7CC;">纯佣合作</text>
				</view>
			</view> -->
			<view class="" style="display: inline-block;position:sticky">
				<image :src="item.avatar" style="width: 133rpx;height: 133rpx;"></image>
			</view>
			<view style="display: inline-block;vertical-align: top;margin-top: calc(3vh);">
				<view>
					<text style="margin: 0 calc(1vw) 0 calc(1vh);font-size: calc(2.5vh);">{{item.nickname}}</text>
				</view>
				<!-- <view style="margin-left: calc(1vw);">
					<text style="font-size: calc(2vh);font-weight: 700">{{user.fans}}</text>
					<text style="font-size: calc(1vh);color: #C8C7CC;">粉丝数</text>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function() {
			this.getMasterDataList();
		},
		data() {
			return {
				openId: "",
				user: []
				// user: {
				// 	username: "木丁",
				// 	species: "全品类",
				// 	carryingMethod: "带货方式",
				// 	fans: "408.23W",
				// 	videoCooperation: "123",
				// 	live: "123",
				// 	servant: "123",
				// },
			}
		},
		methods: {
			getMasterDataList() {
				this.$http({
					url: "/base/douyin/bind/info/list",
					method: "GET",
				}).then(res => {
					this.user = res.data.data
					console.log(this.user)
				});
			},
			toMasterDetail(val) {
				uni.navigateTo({
					url: "/pages/master/masterDetails?userId="+val.userId+"&openId="+val.openId
				})
			},
		}
	}
</script>

<style>
	.body {
		background-color: #F1F1F1;
		height: 100%;
	}

	.body-data {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.body-title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(1vw) 0 calc(1vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.back {
		background-color: #FFFFFF;
	}
</style>
